<template>
  <div class="container">
    <!-- 鼠标检测区域 -->
    <div class="aside-area" @mouseenter="showAside"></div>
    <!-- 左侧边栏 -->
    <aside :class="['aside', { 'show-aside': isAsideVisible }]" @mouseleave="hideAside">
      <div :class="[activeTab == 'Net' ? 'active' : 'item']" @click="changePage('Net')">
        <img src="../assets/net.png" alt="#" class="img">
        <div>蜂窝网络</div>
      </div>
      <div :class="[activeTab == 'Control' ? 'active' : 'item']" @click="changePage('Control')">
        <img src="../assets/control.png" alt="#" class="img">
        <div>基站参数</div>
      </div>
      <div :class="[activeTab == 'Settings' ? 'active' : 'item']" @click="changePage('Settings')">
        <img src="../assets/settings.png" alt="#" class="img">
        <div>仿真设置</div>
      </div>
      <div :class="[activeTab == 'Pv' ? 'active' : 'item']" @click="changePage('Pv')">
        <img src="../assets/system.png" alt="#" class="img">
        <div>光伏系统</div>
      </div>
      <div :class="[activeTab == 'Result' ? 'active' : 'item']" @click="changePage('Result')">
        <img src="../assets/result.png" alt="#" class="img">
        <div>仿真结果</div>
      </div>
      <div :class="[activeTab == 'Reproducibility' ? 'active' : 'item']" @click="changePage('Reproducibility')">
        <img src="../assets/reproducibility.png" alt="#" class="img">
        <div>算法复现</div>
      </div>
    </aside>
    <!-- 主内容区域 -->
    <main :class="{ shift: isAsideVisible }">
        <component :is="tabs[activeTab]" ></component>
    </main>
  </div>
</template>

<script setup>
import Net from '../components/net.vue'
import Control from '../components/control.vue'
import Settings from '../components/settings.vue'
import Pv from '../components/pv.vue'
import Result from '../components/result.vue'
import { ref } from 'vue'

// 定义标签和活动状态
const tabs = { Net, Control, Settings, Pv, Result };
const activeTab = ref('Net');
const isAsideVisible = ref(false); // 控制侧边栏显示状态

function changePage(pageName) {
  activeTab.value = pageName;
}

function showAside() {
  isAsideVisible.value = true; // 显示侧边栏
}

function hideAside() {
  isAsideVisible.value = false; // 隐藏侧边栏
}
</script>

<style>
html, body, #app {
  margin: 0;
  padding: 0;
  height: 100%;
}

.container {
  display: flex;
  flex-direction: row;
  margin: 0;
  background-color: gray;
}

.aside {
  width: 0; /* 初始完全隐藏 */
  height: 100vh;
  overflow: hidden;
  position: fixed; /* 固定在页面左侧 */
  box-shadow: 3px 0px 5px 3px gray;
  background-color: #f9ffff;
  z-index: 999;
  transition: width 0.3s ease; /* 添加宽度过渡动画 */
}

.show-aside {
  width: 170px; /* 鼠标悬停时显示整个左边栏 */
}

.aside-area {
  position: fixed;
  width: 10px; /* 鼠标检测范围 */
  height: 100vh;
  left: 0;
  top: 0;
  z-index: 998; /* 比 aside 低一点 */
  pointer-events: all;
  background: transparent; /* 透明区域 */
}

.item {
  width: 100%;
  height: 10vh;
  display: flex;
  flex-direction: row;
  justify-content: flex-start; /* 左对齐内容 */
  align-items: center;
  padding-left: 10px; /* 给文字和图标增加间距 */
  border-bottom: gray 1px solid;
  transition: background-color 0.3s ease; /* 平滑的背景变化 */
}

.item:hover {
  background-color: #e6f7ff; /* 鼠标悬停改变背景颜色 */
}

.item .img {
  width: 50px; /* 固定图片大小 */
  height: 50px; /* 确保图片高度一致 */
  transition: transform 0.3s ease; /* 添加平滑动画 */
}

.item:hover .img {
  transform: scale(1); /* 禁止放大图片 */
}

.active {
  width: 100%;
  height: 10vh;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding-left: 10px;
  border-bottom: gray 1px solid;
  filter: invert();
}

.active .img {
  width: 50px; /* 确保选中状态下图片大小不变 */
  height: 50px;
}

main {
  width: 100vw;
  height: 100vh;
  background-color: #d7e5eb;
  transition: margin-left 0.3s ease;
}

main.shift {
  margin-left: 170px; /* 左边栏显示时主内容右移 */
}
</style>
